<template>
  <div class="entrySchoolForm">
    <!--<div class="form-operate">
      <div class="form-filter">
        <div class="form-filter-selector">
          <el-form ref="form" v-model="form" label-width="64px">
            <el-form-item label="筛选">
              <el-select v-model="filter"  v-on:change="filterChanger" width="200px;" placeholder="全部">
                <el-option label="全部" :value='-1' :key='-1' lable="-1"></el-option>
                <el-option label="未审批" :value=0 :key=0 lable="0"></el-option>
                <el-option label="审批通过" :value=1 :key=1 lable="1"></el-option>
                <el-option label="审批不通过" :value=2 :key=2 lable="2"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="form-filter-search">
          <el-input
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
            v-model="search"
          >
          </el-input>
          <el-button type="primary" v-on:click="searchTable">搜索</el-button>
        </div>
      </div>
      <div class="operate-right">
        <el-button type="success" v-on:click="manyStateUpdate">批量审批</el-button>
        <el-button type="danger" v-on:click="manyRowDelete">批量删除</el-button>
      </div>
    </div>-->
    <div class="huadi-table">
      <el-table
        v-loading=""
        ref="multipleTable"
        tooltip-effect="dark"
        :data="ctableData"
        @select="tableSelection"
        @select-all="tableAllSelection"
        :header-row-style=headerStyle
        style="width: 100%">
        <el-table-column
          header-align="center"
          type="selection"
        >
        </el-table-column>
        <el-table-column width="100"
          prop="owner"
          label="货主"
          header-align="center"
        >
        </el-table-column>
        <el-table-column width="100"
          prop="code"
          header-align="center"
          label="编码">
        </el-table-column>
        <el-table-column width="500"
          prop="ms"
          header-align="center"
          label="描述">
        </el-table-column>
        <el-table-column width="100"
          prop="kq"
          header-align="center"
          label="库区">
        </el-table-column>
        <el-table-column width="100"
          prop="saveAttribute"
          header-align="center"
          label="存储属性">
        </el-table-column>
        <el-table-column width="100"
          prop="kw"
          header-align="center"
          label="库位">
        </el-table-column>
        <el-table-column width="150"
          prop="lpn"
          header-align="center"
          label="LPN">
        </el-table-column>
        <el-table-column width="100"
          prop="iseccn"
          header-align="center"
          label="是否ECCN">
        </el-table-column>
        <el-table-column width="100"
          prop="iscb"
          header-align="center"
          label="是否叉板">
        </el-table-column>
        <el-table-column width="200"
          prop="ljCode"
          header-align="center"
          label="09码">
        </el-table-column>
        <el-table-column width="150"
          prop="madeTime"
          header-align="center"
          label="制造日期">
        </el-table-column>
        <el-table-column width="100"
          prop="dc"
          header-align="center"
          label="DC">
        </el-table-column>
        <el-table-column width="150"
          prop="reciveTime"
          header-align="center"
          label="收货日期">
        </el-table-column>
        <el-table-column width="300"
          prop="supilerName"
          header-align="center"
          label="供应商全称">
        </el-table-column>
        <el-table-column width="100"
          prop="suppilerCode"
          header-align="center"
          label="供应商代码">
        </el-table-column>
      <el-table-column width="100"
          prop="lpnxyl"
          header-align="center"
          label="LPN现有量">
        </el-table-column>

        <el-table-column width="100"
          prop="lpnkyl"
          header-align="center"
          label="LPN可用量">
        </el-table-column>
        <el-table-column width="150"
          prop="lpnyfpl"
          header-align="center"
          label="LPN已分配量">
        </el-table-column>
        <el-table-column width="150"
          prop="lpnyjhl"
          header-align="center"
          label="LPN已拣货量">
        </el-table-column>

        <el-table-column width="100"
          prop="zt"
          header-align="center"
          label="状态">
        </el-table-column>
        <el-table-column width="100"
          prop="commnet"
          header-align="center"
          label="注释">
        </el-table-column>
        <el-table-column width="150"
          prop="lpniscf"
          header-align="center"
          label="LPN是否拆分">
        </el-table-column>
        <el-table-column width="150"
          prop="wlxh"
          header-align="center"
          label="物料型号">
        </el-table-column>
        <el-table-column width="100"
          prop="erpzk"
          header-align="center"
          label="erp子库">
        </el-table-column>
        <el-table-column width="150"
          prop="endTime"
          header-align="center"
          label="到期日期">
        </el-table-column>

        <el-table-column width="100"
          prop="batch"
          header-align="center"
          label=" 批次">
        </el-table-column>

        <el-table-column width="100"
          prop="kl"
          header-align="center"
          label="库龄">
        </el-table-column>

        <el-table-column width="100"
          prop="kl"
          header-align="center"
          label="库龄">
        </el-table-column>
        <el-table-column width="100"
          prop="hl"
          header-align="center"
          label="货龄">
        </el-table-column>

        <el-table-column width="150"
          prop="hth"
          header-align="center"
          label="合同号">
        </el-table-column>
        <el-table-column width="100"
          prop="lfId"
          header-align="center"
          label="落放id">
        </el-table-column>
        <el-table-column width="100"
          prop="po"
          header-align="center"
          label="po">
        </el-table-column>

        <el-table-column width="100"
           prop="箱号"
           header-align="center"
           label="xh">
         </el-table-column>
        <el-table-column width="100"
          prop="wlbb"
          header-align="center"
          label="物料版本">
        </el-table-column>

        <el-table-column width="100"
           prop="mxh"
           header-align="center"
           label="模穴号">
         </el-table-column>
        <el-table-column width="150"
           prop="wxtsbq"
           header-align="center"
           label="外箱特殊标签">
         </el-table-column>
        <el-table-column width="100"
          prop="lockzt"
          header-align="center"
          label="锁定状态">
        </el-table-column>
          <el-table-column width="100"
            prop="employeeId"
            header-align="center"
            label="用户ID">
          </el-table-column>
         <el-table-column width="150"
           prop="lpndtfbl"
           header-align="center"
           label="LPn动态分布量">
         </el-table-column>
         <el-table-column width="150"
           prop="lpndtfbl"
           header-align="center"
           label="LPn动态分布量">
         </el-table-column>

         <el-table-column width="100"
           prop="cmdj"
           header-align="center"
           label="潮敏等级">
         </el-table-column>
        <el-table-column width="100"
           prop="isClosing"
           header-align="center"
           label="是否隔离">
         </el-table-column>
         <el-table-column width="100"
           prop="devicecode"
           header-align="center"
           label="设备号">
         </el-table-column>
         <el-table-column width="100"
           prop="totalnum"
           header-align="center"
           label="总数量">
         </el-table-column>
         <el-table-column width="100"
            prop="scannum"
            header-align="center"
            label="扫描数量">
         </el-table-column>

<!-- <el-table-column
           prop="lpndtfbl"
           header-align="center"
           label="LPn动态分布量">
         </el-table-column>-->
       <!-- <el-table-column
          width="300"
          header-align="center"
          label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="success" @click="handleChangeStata(scope.row)">审核</el-button>
            <el-button
              type="primary"
              size="mini"
              @click="handleEdit(scope.row)">编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>-->
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        layout="prev, pager, next"
        :total=page.total
        :pageSize=page.pageSize
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <el-dialog title="审批" width="400px" :visible.sync="dialogFormState">
      <el-form :model="stateform">
        <div class="stata-dialog">
          <el-row>    <el-form-item labelWidth="100px" label="审批">
            <el-select v-model="stateform.state" width="200px;" placeholder="请选择">
              <el-option label="未审批" :value=0 :key=0 lable="0"></el-option>
              <el-option label="审批通过" :value=1 :key=1 lable="1"></el-option>
              <el-option label="审批不通过" :value=2 :key=2 lable="2"></el-option>
            </el-select>
          </el-form-item>
          </el-row>
          <div class="marginDia"></div>
          <el-row>
            <el-form-item label="备注" labelWidth="100px" >
              <el-input type="textarea" width="200px" v-model="stateform.memo"></el-input>
            </el-form-item>
          </el-row>


        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormState = false">取 消</el-button>
        <el-button type="primary" @click="UpdateStateById">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="审批" width="400px" :visible.sync="dialogFormStateAll">
      <el-form :model="stateform">
        <div class="stata-dialog">
          <el-row>    <el-form-item labelWidth="100px" label="审批">
            <el-select v-model="stateform.state" width="200px;" placeholder="请选择">
              <el-option label="未审批" :value=0 :key=0 lable="0"></el-option>
              <el-option label="审批通过" :value=1 :key=1 lable="1"></el-option>
              <el-option label="审批不通过" :value=2 :key=2 lable="2"></el-option>
            </el-select>
          </el-form-item>
          </el-row>
          <div class="marginDia"></div>
          <el-row>
            <el-form-item label="备注" labelWidth="100px" >
              <el-input type="textarea" width="200px" v-model="stateform.memo"></el-input>
            </el-form-item>
          </el-row>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormState = false">取 消</el-button>
        <el-button type="primary" @click="UpdateStateByIdAll">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
  export default {
    name: 'OpenDayEntryForm',
    data () {
      return {
        tableSelect:[],
        filter:-1,
        search:"",
        headerStyle: {
          "background-color": '#f5f6fa',
        },
        page: {
          total: 0,
          pageIndex: 0,
          pageSize: 5
        },
        dialogFormState: false,
        dialogFormStateAll:false,
        stateform: {
          id: '',
          state: 0,
          memo: '',
          // false 为不是批量的，true 为批量
          type:false
        },
        tableData: [],
        form: {
          selector: ""
        },
        loading: true
      }
    },
    props:{
      default: true,
      sidebar: false
      },
    methods: {
      handleDelete(row){
        this.$http.post('/Hd-NurseryShool/activity/deleteOpebdayEntry?ids='+row.id,).then(response => {
          if(response.bodyText=='true'){
            this.dialogFormState=false;
            this.pageUtil();
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success'
            });
          }
        }, response => {
          this.$message('网络错误');
        });
      },
      manyStateUpdate(){
        this.stateform={ id: '',state: 0,memo: ''}
        this.dialogFormStateAll=true;
      },
      manyRowDelete(){
        let arr =[];
        for(let select in this.tableSelect){
            arr.push(this.tableSelect[select].id);
        }
        this.$http.post('/Hd-NurseryShool/activity/deleteOpebdayEntry?ids='+arr.toString()).then(response => {
          if(response.bodyText=='true'){
            this.dialogFormState=false;
            this.pageUtil();
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success'
            });
          }
        }, response => {
          this.$message('网络错误');
        });
      },
      tableAllSelection(selection){
        this.tableSelect=selection;
      },
      tableSelection(selection,row){
        this.tableSelect=selection;
      },
      filterChanger(){
        this.page.pageIndex=0;
        this.pageUtil();
      },
      searchTable(){
        this.page.pageIndex=0;
        this.pageUtil();
      },
      handleEdit(row){
        this.$store.commit('enrollUpdate',row);
        this.$router.push({path:'OpenDayEntryEdit',query:{activityId:this.$route.query.activityId,name:this.$route.query.name}});
      },
      pageUtil(){
        this.$http.get('/stock/findwithPage?page='+this.page.pageIndex+'&pageSize='+this.page.pageSize).then(response => {
          this.tableData = response.body.data;
          console.log(this.tableData);
          this.page.total=response.body.total;
        }, response => {
          this.$message('网络错误');
        });
      },
      handleChangeStata(row){
        console.log(row);
        this.stateform.id = row.id;
        this.stateform.memo = row.memo;
        this.stateform.state = row.state;
        this.dialogFormState = true;
      },
      handleCurrentChange(val) {
        this.page.pageIndex=val-1;
        this.pageUtil();
      },
      UpdateStateByIdAll(){
        var arr=[];
        for(var index=0;index<this.tableSelect.length;index++){
          var item={
            id:this.tableSelect[index].id,
            state:this.stateform.state,
            memo:this.stateform.memo
          }
          arr.push(item);
        }
        this.$http.post('/Hd-NurseryShool/activity/approval',{paramsModels:arr}).then(response => {
          if(response.bodyText=='true'){
            this.pageUtil();
            this.dialogFormStateAll=false;
            this.$refs.multipleTable.clearSelection();
            this.$notify({
              title: '成功',
              message: '保存成功',
              type: 'success'
            });
          }
        }, response => {
          this.$message('网络错误');
        });
      },
      UpdateStateById(){
        var arr=[];
        arr.push(this.stateform)
        this.$http.post('/Hd-NurseryShool/activity/approval',{paramsModels:arr}).then(response => {
          debugger;
          if(response.bodyText=='true'){
            this.stateform.type=false;
            this.dialogFormState=false;
            this.$refs.multipleTable.clearSelection();
            this.pageUtil();
            this.$notify({
              title: '成功',
              message: '保存成功',
              type: 'success'
            });
          }
        }, response => {
          this.$message('网络错误');
        });
      }
    },
    computed: {
      ctableData(){
        for (let index = 0; index < this.tableData.length; index++) {
          switch (this.tableData[index].state) {
            case 0:
              this.tableData[index].cstate = "未审批";
              break;
            case 1:
              this.tableData[index].cstate = "审批通过";
              break;
            case 2:
              this.tableData[index].cstate = "审批未通过";
              break;
          }
          this.loading = false;
        }

        return this.tableData;
      }
    },
    created(){
      this.page.pageIndex=0;
      this.pageUtil();
      let __this=this;
      this.$store.commit("update", [{name: '原材料隔离跟踪', router: '/'}, {name: '物料记录', router: '/OpenDayEntryForm'},{name:this.$route.query.name}]);
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .pagination, el-pagination {
    margin-top: 24px;
    width: 500px;
    padding: 0px !important;
  }

  .huadi-table {
    margin-top: 25px;
    text-align: center;
  }

  .operate-right {
    width: 200px;
    /*width:300px;*/
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-right: 40px;
  }
  .marginDia{
    height:20px;
    width:100%;
  }

  .stata-dialog > .form-item{
    margin-top:20px;
  }
  .form-filter-search{
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
  }

  .el-input {
    width: 200px;
    margin-right:10px;
  }

  .entrySchoolForm {
    width: 100%;
    heigth: 100%;
    background: #eaedf1;
  }

  .form-operate {
    height: 70px;
    width: 100%;
    border-radius: 3px;
    background: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .form-filter {
    height: 100%;
    padding-left: 10px;
    width: 550px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .form-filter-selector {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .el-form {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .el-form-item {
    margin-bottom: 0;
  }

</style>
